import { VNode, CreateElement } from 'vue'

type Slot = { [x: string]: VNode | VNode[] | string | null }
type Slots = { [key: string]: VNode[] | undefined }

/**
 * @description: 渲染插槽
 * @param {CreateElement} h h === CreateElement
 * @param {Slot} originSlots 原插槽数据
 * @return {VNode[] | null} 重新转换后的插槽数据
 */
export function renderSlots(h: CreateElement, originSlots: Slots | undefined): VNode[] | null {
  
  if (!originSlots) {
    console.warn('Caused: originSlots is empty')
    return null
  }
  
  const slots: Array<Slot> = []
  
  for (const slotName in originSlots) {
    slots.push({
      name: slotName,
      value: originSlots[slotName] || null
    })
  }
  
  return (
    slots.map((slot: Slot) => {
      return (
        <template slot={slot.name}>
          { slot.value }
        </template>
      )
    })
  )
}

export default {
  renderSlots
}